<template>
    <div class="large-right1" @click="openChild">
        <div class="panel-title right-title">
            <div class="panel-title-box">
                <img class="panel-title-ico" src="@/assets/large/panel-title-ico.png" />
                用户画像
            </div>
            <img class="panel-title-bg" src="@/assets/large/panel-title.png" />

        </div>
        <div>
            <div id="right1Chart"></div>
        </div>
        <Right1childVue :userStatics="pageData" :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible"/>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { echartLoad, toDecimalNoZero } from "@/utils";
import Right1childVue from "../child/right1child.vue";
@Component({
    name: "home",
    components: { Right1childVue },
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    dataList: any[] = [];
    chart: any = null;
    mounted() {
        this.setPageData();
    }
    setPageData() {
        if (!this.pageData) return;
        this.dataList = [
            { name: "注册", val: this.pageData.registeredUsers||0 },
            { name: "咨询", val: this.pageData.consultUsers||0 },
            { name: "领取优惠", val: this.pageData.couponReceiveUsers||0 },
            { name: "购买", val: this.pageData.purchaseUsers||0 },
        ];
        
        echartLoad(() => {
            this.setChart();
        });
    }
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    childVisible = false;
    openChild() {
        this.childVisible = true;
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 2 秒切换一次）
            this.timer = setInterval(this.autoHighlight, 3000);

            // 鼠标悬停时暂停自动切换
            this.chart.on("mouseover", () => clearInterval(this.timer));
            this.chart.on("mouseout", () => {
                this.timer = setInterval(this.autoHighlight, 3000);
            });
        }
    }
    currentIndex = -1;
    timer: any = null;
    autoHighlight() {
        const dataLen = this.dataList.length;
        // 取消之前的高亮
        this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.currentIndex,
        });
        // 计算下一个索引
        this.currentIndex = (this.currentIndex + 1) % dataLen;
        // 高亮当前数据项
        this.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 1,
            dataIndex: this.currentIndex,
        });
        // 显示 Tooltip
        this.chart.dispatchAction({
            type: "showTip",
            seriesIndex: 1,
            dataIndex: this.currentIndex,
        });
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("right1Chart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            color: ["#F33700", "#EAC618", "#EF9F1B", "#A8DC19", "#04CB79"],
            grid: {
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
            },

            tooltip: {
                trigger: "item",
                formatter: "{b} : {c}",
            },
            legend: [
                {
                    data: ["注册", "领取优惠"], // 左侧显示的图例项
                    left: "5%", // 左侧定位
                    orient: "vertical", // 垂直排列
                    align: "left", // 文本左对齐
                    bottom: "20%", // 垂直居中

                    // 图例图形样式
                    itemWidth: 12, // 图例图标宽度
                    itemHeight: 12, // 图例图标高度
                    itemGap: 15, // 图例项间隔
                    itemStyle: {
                        borderWidth: 0, // 边框粗细
                        opacity: 1,
                    },

                    // 文字样式
                    textStyle: {
                        color: "#fff", // 文字颜色
                        fontSize: 14, // 字体大小
                    },
                    formatter: (name) => {
                        const dataItem = this.dataList.find((item) => item.name === name);
                        return `${name} ${dataItem.val}`;
                    },
                },
                {
                    data: ["咨询", "购买"], // 右侧显示的图例项
                    right: "5%", // 右侧定位
                    orient: "vertical", // 垂直排列
                    align: "left", // 文本左对齐
                    bottom: "20%", // 垂直居中
                    // 图例图形样式
                    itemWidth: 12, // 图例图标宽度
                    itemHeight: 12, // 图例图标高度
                    itemGap: 15, // 图例项间隔
                    itemStyle: {
                        borderWidth: 0, // 边框粗细
                        opacity: 1,
                    },

                    // 文字样式
                    textStyle: {
                        color: "#fff", // 文字颜色
                        fontSize: 14, // 字体大小
                    },
                    formatter: (name) => {
                        const dataItem = this.dataList.find((item) => item.name === name);
                        return `${name} ${dataItem.val}`;
                    },
                },
                // {
                //     data: ["生物医药"], // 右侧显示的图例项
                //     right: "40%", // 右侧定位
                //     orient: "vertical", // 垂直排列
                //     align: "left", // 文本左对齐
                //     bottom: "1%", // 垂直居中
                //     // 图例图形样式
                //     itemWidth: 12, // 图例图标宽度
                //     itemHeight: 12, // 图例图标高度
                //     itemGap: 30, // 图例项间隔
                //     itemStyle: {
                //         borderWidth: 0, // 边框粗细
                //         opacity: 1,
                //     },

                //     // 文字样式
                //     textStyle: {
                //         color: "#fff", // 文字颜色
                //         fontSize: 14, // 字体大小
                //     },
                //     formatter: (name) => {
                //         const dataItem = this.dataList.find((item) => item.name === name);
                //         return `${name} ${dataItem.val}%`;
                //     },
                // },
            ],
            series: this.getSeries(),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getSeries() {
        return [
            {
                name: "",
                type: "funnel",
                left: "20%",
                width: "60%",
                silent: true,
                top: 10,
                bottom: 30,
                label: {
                    show: false,
                },
                labelLine: {
                    show: false,
                },
                itemStyle: {
                    opacity: 0.2,
                },
                emphasis: {
                    show: false,
                },
                data: this.dataList.map((item, idx) => {
                    return {
                        value: (3 - idx + 1) * 20,
                        name: item.name,
                    };
                }),
            },
            {
                name: "保税区投资额",
                type: "funnel",
                left: "20%",
                width: "60%",
                maxSize: "80%",
                top: 10,
                bottom: 30,
                label: {
                    position: "inside",
                    formatter: "{c}",
                    color: "#fff",
                },
                itemStyle: {
                    opacity: 0.7,
                    borderColor: function (params) {
                        return params.color; // params.color 是当前数据项的颜色
                    },
                    borderWidth: 1,
                },
                emphasis: {
                    label: {
                        position: "inside",
                        formatter: "{c}",
                    },
                },
                data: this.dataList.map((item) => {
                    return {
                        value: item.val,
                        name: item.name,
                    };
                }),
                // Ensure outer shape will not be over inner shape when hover.
                z: 100,
            },
        ];
    }
}
</script>
<style lang="scss">
.large-right1 {
    width: 100%;
    #right1Chart {
        width: 100%;
        height: 18vh;
    }
}
</style>
